<template>
  
  <el-table :data="tableData" style="width: 100%">
    <!-- <el-table-column label="问题分类编号" prop="questionCategoryId" />
    <el-table-column label="问题分类名称" prop="questionCategoryName" />
    <el-table-column label="问题分类父级编号" prop="questionCategoryParentId" /> -->
    <el-table-column label="问题序号" prop="questionId" />
    <el-table-column label="问题标题" prop="questionTitle" />
    <el-table-column label="问题类型" prop="questionTypeId" />
    <el-table-column label="问题创建日期" prop="questionDate" />
    <el-table-column label="问题答案" prop="questionAnswer" />
    <el-table-column label="问题热度" prop="questionHot" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Category to search" />
      </template>
      <template #default="scope">
        <el-button type="success" plain size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <add1/>
        
  <el-dialog v-model="dialogFormVisible" title="新增">
    <el-form :model="form">
      <el-form-item label="问题分类名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="父级分类" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择一种类别">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="open1">取消</el-button>
        <el-button type="primary" @click="handleAdd"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>

        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background 
          @current-change="handleCurentChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="total,prev, pager, next,jumper" 
          :total="pagination.total" />
</template>

<script>

import { computed, ref,reactive } from 'vue'
import { defineComponent, onMounted } from "vue";
import axios from "axios"
// interface User {
//   date: string
//   name: string
//   address: string
// }

// const search = ref('')
// const filterTableData = computed(() =>
//   tableData.filter(
//     (data) =>
//       !search.value ||
//       data.name.toLowerCase().includes(search.value.toLowerCase())
//   )
// )
// const handleEdit = (index: number, row: User) => {
//   console.log(index, row)
// }
// const handleDelete = (index: number, row: User) => {
//   console.log(index, row)
// }

let dialogFormVisible = ref(false)
let form = reactive({
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        })
export default defineComponent({
  name: 'App',
  data(){ 
    return{
      tableData : [],
      pagination:{
      currentPage:1,
      pageSize:7,
      total:0
      },
      // dialogFormVisible:false
    }
  },
  
  created(){
    this.getAll();
  },

  methods:{
    getAll1(){
      axios.get(`/Api/question/list/1/7`).then(res=>{
      console.log(res)
      this.tableData = res.data
      })
    },
    getAll(){
      axios.get("/Api/question/list/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then(res=>{
      console.log(res)
      this.tableData = res.data.data
      this.pagination.total = res.data.page.total
      this.pagination.currentPage = res.data.page.pageNum
      this.pagination.pageSize = res.data.page.pageSize
      })
    },
    // 删除差个用户确认框
    handleDelete(index,row){
      // this.$confirm("此操作将永久删除信息","提示",{type:"info"}).then(()=>{
      //   console.log("success")
      // }).catch(()=>{
      //   console.log("erro")
      // })

      axios.delete(`/Api/category`+row.questionCategoryId).then((res)=>{
        if(res.code){
          this.getAll()
          this.open2()
        }else{
          this;open4()
        }
      })
      this.open4()
    },
    // 换页
    handleCurentChange(currentPage){
      this.pagination.currentPage = currentPage;
      this.getAll()
    },
    open2 (){
            ElMessage({
                message: '删除成功!',
                type: 'success',
            })
    },
     open4 () {
            ElMessage.error('删除失败!')
    },
    // 编辑
    handleEdit(index, row) {
      console.log("进来了")
      dialogFormVisible = true
      console.log(dialogFormVisible)
    }

  }
  })
</script>

